<include file="/public/header" />
<style>
    html,
    body {
        height: 100%;
    }

    .layui-table-cell {
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
        height: auto;
        /*在这里设置行高没用*/
    }
</style>
<div id="xse" style="height: 100%;width:100%;"></div>
<include file="/public/footer" />
<script src="__STATICADMIN__module/echarts/echarts.js"></script>
<script>
    layui.use(['jquery'], function () {
        var jquery = layui.jquery;
        var datelist = {$datelist|raw};
    // 渲染销售额图表
    var matname = [];//坐标轴名称
    var matweight = [];//材料重量
    var mattotal = [];//材料价格
    var outweight = []; //出货量
    layui.$.each(datelist, function (i, obj) {
        matname.push(obj.date);
        matweight.push(Number(obj.weight));
        mattotal.push(Number(obj.price));
        outweight.push(Number(obj.oweight));
    });
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('xse'));
    var option;
    option = {
        xAxis: {
            type: 'category',
            axisLabel: { interval: 0, rotate: 30 },
            splitLine: { show: true },
            data: matname,
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
        },
        yAxis: [{},{}],
        series: [
            {
                name: '进货量(KG)',
                type: 'bar',
                data: matweight,
                label: {
                    show: true,
                    formatter: '{c}'
                },
                yAxisIndex: 0
            },
            {
                name: '出货量(KG)',
                type: 'bar',
                data: outweight,
                label: {
                    show: true,
                    formatter: '{c}'
                },
                yAxisIndex: 0
            },
            {
                name: '均价(元/KG)',
                type: 'line',
                data: mattotal,
                label: {
                    show: true,
                    formatter: '{c}'
                },
                yAxisIndex: 1
            }
        ],
        legend: {
            show: true
        },
    };
    myChart.setOption(option);
    });
</script>